import { Button, List, WhiteSpace, Flex, InputItem, Picker, Provider, Toast, PickerView, Modal, Switch } from '@ant-design/react-native';
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, Alert, ScrollView } from 'react-native';
import { saveAddressInfo } from '~/api/owner';
import { getCityList } from '~/api/basic';
import { getAddressInfo } from '~/api/public';
import { connect } from 'react-redux';
import { compose } from 'redux';

const mapGetter = (state) => {
    return {
        userinfo: state.userinfo,
        system: state.system,
    };
};

class AddAddress extends Component {
    static navigationOptions = {
        title: '我的地址',
    };

    constructor(props) {
        super(props);
        this.state = {
            PuAddressID: this.props.navigation.getParam('PuAddressID'),
            name: '',
            Phone: '',
            Telphone: '',
            AddressType: '',
            AddressState: 2,
            CityID: '',
            CityName: '',
            Address: '',
            number: '',
            city: '',
            data: [],
            value: [],
            visible: false,
            label: '请选择城市',
            checked: 0,
        };
        this.onSwitchChange = (value) => {
            this.setState({
                checked: value,
                AddressState: value ? 1 : 2,
            });
        };
        getCityList().then((r) => {
            if (r.code === 0) {
                if (this.state.PuAddressID != 0) {
                    getAddressInfo(this.state.PuAddressID).then((res) => {
                        if (res.code === 0) {
                            let value = [];
                            let c1 = parseInt(res.data.CityID / 10000, 10) * 10000;
                            value.push(c1);
                            let c2 = parseInt(res.data.CityID / 100, 10) * 100;
                            value.push(c2);
                            value.push(res.data.CityID);
                            this.setState({
                                checked: res.data.AddressState,
                                data: r.data,
                                name: res.data.Contacter,
                                Phone: res.data.Telphone,
                                label: res.data.CityName,
                                Address: res.data.Address,
                                AddressState: res.data.AddressState,
                                value,
                            });
                        } else {
                            Toast.info('失败', 1);
                        }
                    });
                } else {
                    let data = r.data[0];
                    let value = [];
                    value.push(data.value);
                    data = data.children[0];
                    value.push(data.value);
                    data = data.children[0];
                    value.push(data.value);
                    this.setState({
                        data: r.data,
                        value,
                    });
                }
            } else {
                Toast.info('失败', 1);
            }
        });
        this.onChange = (value) => {
            this.setState({
                value,
            });
        };
        this.setCityName = () => {
            let data = this.state.data;
            let cityName = [];
            this.state.value.forEach((v) => {
                let item = data.find((item) => item.value === v);
                if (cityName.indexOf(item.label) === -1) {
                    cityName.push(item.label);
                }
                data = item.children;
            });
            this.setState({
                label: cityName.join('/'),
            });
        };
        this.onClose = () => {
            this.setCityName();
            this.setState({
                visible: false,
            });
        };
        this.onClose1 = () => {
            this.setState({
                visible: false,
            });
        };
    }

    render() {
        const addAddress = () => {
            if (this.state.name === '') {
                Toast.info('请输入收货人姓名', 1);
            } else if (this.state.Phone === '') {
                Toast.info('请输入电话号码', 1);
            } else if (!/^1[3-9]\d{9}$/.test(this.state.Phone)) {
                Toast.info('请输入正确电话号码', 1);
            } else if (this.state.label === '请选择城市') {
                Toast.info('请选择城市', 1);
            } else if (this.state.Address === '') {
                Toast.info('请输入地址', 1);
            } else {
                saveAddressInfo({
                    PuAddressID: 0,
                    AddressType: 1,
                    Contacter: this.state.name,
                    Telphone: this.state.Phone,
                    Address: this.state.Address,
                    CityName: this.state.label,
                    Phone: this.state.Phone,
                    AddressState: this.state.AddressState,
                    CityID: this.state.value[this.state.value.length - 1],
                }).then((r) => {
                    if (r.code === 0) {
                        Toast.info('添加成功', 1);
                        this.props.navigation.push('MyAddress');
                    } else {
                        Toast.info('添加失败', 1);
                    }
                });
            }
        };
        const Addresss = () => {
            if (this.state.name === '') {
                Toast.info('请输入收货人姓名', 1);
            } else if (this.state.Phone === '') {
                Toast.info('请输入电话号码', 1);
            } else if (!/^1[3-9]\d{9}$/.test(this.state.Phone)) {
                Toast.info('请输入正确电话号码', 1);
            } else if (this.state.label === '请选择城市') {
                Toast.info('请选择城市', 1);
            } else if (this.state.Address === '') {
                Toast.info('请输入地址', 1);
            } else {
                saveAddressInfo({
                    PuAddressID: this.state.PuAddressID,
                    AddressType: 1,
                    AddressState: this.state.AddressState,
                    Contacter: this.state.name,
                    Telphone: this.state.Phone,
                    Address: this.state.Address,
                    CityName: this.state.label,
                    Phone: this.state.Phone,
                    CityID: this.state.value[this.state.value.length - 1],
                }).then((r) => {
                    if (r.code === 0) {
                        Toast.info('修改成功', 1);
                        this.props.navigation.push('MyAddress');
                    } else {
                        Toast.info('修改失败', 1);
                    }
                });
            }
        };
        const setName = (name) => {
            this.setState({
                name: name,
            });
        };
        const setPhone = (Phone) => {
            this.setState({
                Phone: Phone,
            });
        };
        const setAddress = (Address) => {
            this.setState({
                Address: Address,
            });
        };
        const setnumber = (number) => {
            this.setState({
                number: number,
            });
        };
        const setCity = (city) => {
            this.setState({
                city: city,
            });
        };
        return (
            <>
                {this.state.PuAddressID != 0 ? (
                    <ScrollView>
                        <View style={styles.view}>
                            <WhiteSpace size="md" />
                            <View
                                style={{
                                    width: '100%',
                                    flexDirection: 'row',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                    backgroundColor: '#FFFFFF',
                                }}>
                                <View style={{ width: '20%', flexDirection: 'row' }}>
                                    <Text style={{ color: 'red' }}>*</Text>
                                    <Text>收货人:</Text>
                                </View>
                                <List style={styles.input}>
                                    <InputItem placeholder="请输入收货人姓名" type={'text'} onChange={setName} value={this.state.name} />
                                </List>
                            </View>
                            <WhiteSpace size="md" />
                            <View
                                style={{
                                    width: '100%',
                                    flexDirection: 'row',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                    backgroundColor: '#FFFFFF',
                                }}>
                                <View style={{ width: '20%', flexDirection: 'row' }}>
                                    <Text style={{ color: 'red' }}>*</Text>
                                    <Text>手机号码:</Text>
                                </View>
                                <List style={styles.input}>
                                    <InputItem placeholder="请输入手机号码" type={'phone'} onChange={setPhone} value={this.state.Phone} />
                                </List>
                            </View>
                            <WhiteSpace size="md" />
                            <View
                                style={{
                                    width: '100%',
                                    flexDirection: 'row',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                    backgroundColor: '#FFFFFF',
                                }}>
                                <View style={{ width: '20%', marginLeft: '4%', flexDirection: 'row' }}>
                                    <Text style={{ color: 'red' }}>*</Text>
                                    <Text style={{ marginLeft: '2%' }}>选择城市:</Text>
                                </View>
                                <Button
                                    style={{ width: '65%', marginLeft: '10%', alignItems: 'flex-start' }}
                                    onPress={() => {
                                        this.setState({ visible: true });
                                    }}>
                                    {this.state.label}
                                </Button>
                                <Modal popup={true} visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                                    <View
                                        style={{
                                            paddingVertical: 20,
                                            paddingHorizontal: 20,
                                        }}>
                                        <PickerView data={this.state.data} value={this.state.value} onChange={this.onChange} />
                                    </View>
                                    <Flex direction={'row'} justify='between'>
                                        <Button style={{ width: '45%' }} type="warning" onPress={this.onClose}>
                                            确定
                                        </Button>
                                        <Button style={{ width: '45%', backgroundColor: '#F2BC38', borderColor: '#F2BC38' }} type={'primary'} onPress={this.onClose1}>
                                            取消
                                        </Button>
                                    </Flex>
                                </Modal>
                            </View>
                            <WhiteSpace size="md" />
                            <View
                                style={{
                                    width: '100%',
                                    flexDirection: 'row',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                    backgroundColor: '#FFFFFF',
                                }}>
                                <View style={{ width: '20%', flexDirection: 'row' }}>
                                    <Text style={{ color: 'red' }}>*</Text>
                                    <Text>详细地址:</Text>
                                </View>
                                <List style={styles.input}>
                                    <InputItem placeholder="街道、小区、写字楼" type={'text'} onChange={setAddress} value={this.state.Address} />
                                </List>
                            </View>
                            <WhiteSpace size="xl" />
                            <View
                                style={{
                                    width: '100%',
                                    flexDirection: 'row',
                                    justifyContent: 'space-around',
                                    alignItems: 'center',
                                }}>
                                <View style={{ width: '20%' }}>
                                    <Text>默认地址:</Text>
                                </View>
                                <View style={{ width: '65%' }}>
                                    <Switch checked={this.state.checked == 1 ? true : false} onChange={this.onSwitchChange} />
                                </View>
                            </View>
                        </View>
                        <WhiteSpace size="xs" />
                        <Flex justify="center">
                            <Button style={{ width: 300, marginTop: '50%' }} type="warning" onPress={Addresss}>
                                修改收货地址
                            </Button>
                        </Flex>
                    </ScrollView>
                ) : (
                        <ScrollView>
                            <View style={styles.view}>
                                <WhiteSpace size="md" />
                                <View
                                    style={{
                                        width: '100%',
                                        flexDirection: 'row',
                                        justifyContent: 'space-around',
                                        alignItems: 'center',
                                        backgroundColor: '#FFFFFF',
                                    }}>
                                    <View style={{ width: '20%', flexDirection: 'row' }}>
                                        <Text style={{ color: 'red' }}>*</Text>
                                        <Text>收货人:</Text>
                                    </View>
                                    <List style={styles.input}>
                                        <InputItem placeholder="请输入收货人姓名" type={'text'} onChange={setName} />
                                    </List>
                                </View>
                                <WhiteSpace size="md" />
                                <View
                                    style={{
                                        width: '100%',
                                        flexDirection: 'row',
                                        justifyContent: 'space-around',
                                        alignItems: 'center',
                                        backgroundColor: '#FFFFFF',
                                    }}>
                                    <View style={{ width: '20%', flexDirection: 'row' }}>
                                        <Text style={{ color: 'red' }}>*</Text>
                                        <Text>手机号码:</Text>
                                    </View>
                                    <List style={styles.input}>
                                        <InputItem placeholder="请输入收货人手机号码" maxLength={11} type={'number'} onChange={setPhone} />
                                    </List>
                                </View>
                                <WhiteSpace size="md" />
                                <View
                                    style={{
                                        width: '100%',
                                        flexDirection: 'row',
                                        justifyContent: 'space-around',
                                        alignItems: 'center',
                                        backgroundColor: '#FFFFFF',
                                    }}>
                                    <View style={{ width: '20%', marginLeft: '4%', flexDirection: 'row' }}>
                                        <Text style={{ color: 'red' }}>*</Text>
                                        <Text style={{ marginLeft: '2%' }}>选择城市:</Text>
                                    </View>
                                    <Button
                                        style={{ width: '65%', marginLeft: '10%', alignItems: 'flex-start' }}
                                        onPress={() => {
                                            this.setState({ visible: true });
                                        }}>
                                        {this.state.label}
                                    </Button>
                                    <Modal popup={true} visible={this.state.visible} animationType="slide-up" onClose={this.onClose}>
                                        <View
                                            style={{
                                                paddingVertical: 20,
                                                paddingHorizontal: 20,
                                            }}>
                                            <PickerView data={this.state.data} value={this.state.value} onChange={this.onChange} />
                                        </View>
                                        <Flex direction={'row'} justify='between'>
                                            <Button style={{ width: '45%' }} type="warning" onPress={this.onClose}>
                                                确定
                                        </Button>
                                            <Button style={{ width: '45%', backgroundColor: '#F2BC38', borderColor: '#F2BC38' }} type={'primary'} onPress={this.onClose1}>
                                                取消
                                        </Button>
                                        </Flex>
                                    </Modal>
                                </View>
                                <WhiteSpace size="md" />
                                <View
                                    style={{
                                        width: '100%',
                                        flexDirection: 'row',
                                        justifyContent: 'space-around',
                                        alignItems: 'center',
                                        backgroundColor: '#FFFFFF',
                                    }}>
                                    <View style={{ width: '20%', flexDirection: 'row' }}>
                                        <Text style={{ color: 'red' }}>*</Text>
                                        <Text>详细地址:</Text>
                                    </View>
                                    <List style={styles.input}>
                                        <InputItem placeholder="街道、小区、写字楼" type={'text'} onChange={setAddress} />
                                    </List>
                                </View>
                                <WhiteSpace size="xl" />
                                <View
                                    style={{
                                        width: '100%',
                                        flexDirection: 'row',
                                        justifyContent: 'space-around',
                                        alignItems: 'center',
                                    }}>
                                    <View style={{ width: '20%' }}>
                                        <Text>默认地址:</Text>
                                    </View>
                                    <View style={{ width: '65%' }}>
                                        <Switch checked={this.state.checked} onChange={this.onSwitchChange} />
                                    </View>
                                </View>
                            </View>
                            <WhiteSpace size="xs" />
                            <Flex justify="center">
                                <Button style={{ width: 300, marginTop: '50%' }} type="warning" onPress={addAddress}>
                                    保存收货地址
                            </Button>
                            </Flex>
                        </ScrollView>
                    )}
            </>
        );
    }
}

const styles = StyleSheet.create({
    view: {
        // marginLeft: 10,
        marginTop: 10,
        // marginRight: 10,
        paddingBottom: 20,
    },
    input: {
        width: '65%',
    },
});

export default connect(mapGetter)(AddAddress);
